<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ登录界面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding:0;
        }
        html,body{
            width:100%;
            height:100%;
            overflow: hidden;
        }

        div.QQlogin{
            position: absolute;
            left:calc(50% - 215px);
            top:calc(27% - 10px);
            width:430px;
            height:333px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
            z-index: 100;
        }
        div.QQlogin aside{
            width:100%;
            height:180px;
            background-image: url("img/qq.gif");
            cursor: move;
        }
        div.down{
            width:100%;
            position: relative;
            height:153px;
            background-color:#EBF2F9 ;
            margin-right: 0;
            margin-left: 0;
        }
        div.down div.touxiang{
            height:100%;
        }
       div.down div.touxiang > a{
           width:81px;
           height:81px;
           display: inline-block;
           background: url("img/touxiang.png") no-repeat;
           background-size: 100% 100%;
           opacity: .8;
           margin-top: 20px;
           margin-left: 30px;
       }
        div.down div.touxiang dl{
            position: absolute;
            left:100%;
            top:53%;
        }
        div.down div.touxiang dl span{
            display: inline-block;
            width: 14px;
            height: 14px;
            background-image: url("img/ptlogin.png");
            background-repeat: no-repeat;
            margin-right: 5px;
            opacity: .8;
        }
        span.online{
           background-position-x: 0;
        }
        span.callMe{
            background-position-x: -73px;
        }
        span.away{
            background-position-x: -18px;
        }
        span.busy{
            background-position-x: -36px;
        }
        span.hid{
            background-position-x: -54px;
        }
        span.silent{
            background-position-x: -108px;
        }
        dl dd{
            border: 1px solid #acb1b6;
            width: 100px;
            background-color: #eee;
            border-radius: 5px;
            padding-left:10px ;
            box-sizing: border-box;
            display: none;
            z-index: 500;
            position: absolute;
        }
        dl dd a{
            display: block;
            color: #001423;
            margin: 10px 0 ;
        }
        div.down div.touxiang i.people{
            background: url("img/input_username.png") no-repeat;
            position: absolute;
            width:35px;
            height:35px;
            top:75%;
            left:10px;
        }
        div.login-box{
            margin-top: 15px;
            margin-left: 20px;
        }
        div.login-box input{
            height:30px;
            width:195px;
            border:1px solid #d1d1d1;
            padding-left:10px;
            color:#7e7e7e;
        }
        div.login-box input::-webkit-input-placeholder{
            color:#7e7e7e;
        }
        div.login-box span.first{
            display: inline-block;
            position: absolute;
            width:20px;
            height:20px;
            background: url("img/row.png") no-repeat;
            margin-left: 172px;
            top:8px;
        }
        div.login-box span.second{
            display: inline-block;
            position: absolute;
            width:20px;
            height:20px;
            background: url("img/press.png") no-repeat;
            margin-left: 168px;
            top:34px;
        }
        div.login-box input:first-child{
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom: none;
        }
        div.login-box input:last-child{
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        div.login-box label {
            font-size: 10px;
            color:#656565;
            font-weight: normal;

            text-indent: 15px;
            margin-top: 10px;
            display: inline-block;
        }
        div.login-box label.auto-login{
            margin-left: 48.4px;
        }
        div.login-box input.three{
            width:16px;
            height:16px;
            margin-top: 1px;
            position: absolute;
            margin-left: -15px;
        }
        div.login-box input.four{
            width:16px;
            height:16px;
            margin-top: 1px;
            position: absolute;
            margin-left: -15px;
        }
        div.login-box button{
            display: inline-block;
            width:90px;
            height:30px;
            background-color: #16a8de;
            color:#fff;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 600;
            z-index: -500;
        }
		div.login-box .zc{
		   background:red;
		}
        div.register{
            position: absolute;
            margin-top: 22px;
            margin-left: 335px;
        }
        div.register a{
            color:#2685e3;
            display: block;
            width:60px;
            font-size: 13px;
            font-family: "微软雅黑";
        }
        div.register a.find-password{
            margin-top: 13px;
        }

        div.mask{
            width:100%;
            height:100%;
            background-color: #000;
            position: absolute;
            top:0;
            bottom: 0;
            left:0;
            right:0;
            z-index: -3000;
            opacity: 0.3;
            filter: Alpha(opacity=40);
            display: none;
        }
        div.login a{
            color: #ff023a;
            font-size: 30px;
            font-weight: 600;
            position: absolute;
            left:calc(50% - 100px);
            top:calc(55% - 10px);
        }
        div.QQlogin i.close{
            position: absolute;
            z-index: 100000;
            display: inline-block;
            width:20px;
            height:20px;
            top: 3px;
            right: 5px;
            background-image: url("img/close.png");
        }
    </style>
</head>


    <div class="QQlogin" id="QQlogin">
        <aside></aside>
        <i class="close"></i>
        <div class="row down">
            <div class="col-xs-3 touxiang">
                <a href="#"></a>
                <dl>
                    <dt><a href="#"><span class="online"></span></a></dt>
                    <dd>
                        <a href="#"><span class="online"></span>我在线上</a>
                        <a href="#"><span class="callMe"></span>Q我吧</a>
                        <a href="#"><span class="away"></span>离开</a>
                        <a href="#"><span class="busy"></span>忙碌</a>
                        <a href="#"><span class="silent"></span>请勿打扰</a>
                        <a href="#"><span class="hid"></span>隐身</a>
                    </dd>
                </dl>
                <i class="people"></i>
            </div>
            <div class="col-xs-6 login-box">
                <input type="text" placeholder="QQ号码/手机/邮箱"><span class="first"></span>
                <input type="password" placeholder="密码"><span class="second" ></span>
                <label><input type="checkbox" class="three">&nbsp;记住密码</label>
                <label class="auto-login"><input type="checkbox" class="four">&nbsp;自动登录</label>
                <button class="btn zc">注&nbsp;&nbsp;&nbsp;&nbsp;册</button><button class="btn" style='margin-left:5px;'>登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
            </div>
            <div class="col-xs-3 register">
                <a href="#">注册账号</a>
                <a href="#" class="find-password">找回密码</a>
            </div>
        </div>

    </div>
</body>
<script>
    var QQlogin=document.querySelector("#QQlogin");
    var aside=document.querySelector("#QQlogin aside");
    var link=document.querySelector("#QQlogin dl dt a");
    var box=document.querySelector("#QQlogin dl dd");
    var links=document.querySelectorAll("#QQlogin dl dd a");
    var mask=document.querySelector("#mask");
    var close=document.querySelector("#QQlogin i.close");
    //alert(aside.nodeName);
    //处理拖动QQ的登录框

    aside.onmousedown=function(e){
        var x= e.clientX-QQlogin.offsetLeft;
        var y= e.clientY-QQlogin.offsetTop;
        document.onmousemove=function(e){
            var top=e.clientY-y;
            var left=e.clientX-x;
            top=Math.min((Math.max(0,top)),window.innerHeight-QQlogin.offsetHeight);
            left=Math.min((Math.max(0,left)),window.innerWidth-QQlogin.offsetWidth);
            //console.log("top:"+top+"-left:"+left);
            QQlogin.style.top= top+"px";
            QQlogin.style.left= left+"px";
        };
        document.onmouseup=function(){
            this.onmousemove=null;
            this.onmouseup=null;
        }
    };
    //点击头像上的在线状态出来dd的内容
    link.onclick=function(e){

       //alert("ok");
        box.style.display="block";
        e.stopPropagation();
    };
    document.onclick=function(){
        box.style.display="none";
    };

    //处理头像上的选择在线状态
    var span=document.querySelector("#QQlogin dl dt a span");
    for(var i=0;i<links.length;i++){
        links[i].onclick=function(){
            span.className=this.querySelector("span").className;
            //alert(this.previousSibling.nodeName);

            span.innerText=this.querySelector("span").innerText;
            //alert(span.innerText);
        }

    }


    //重新调整对话框的位置和遮罩，并且展现

   
    //处理关闭对话框
    close.onclick=function(){
        QQlogin.style.display='none';
        mask.style.display='none';
    }
</script>
</html>